{include file="public:header" /}
<style>
    #lists .w_img_width{width:50px;}
    .weixin .w_img_width{width:290px;height:145px;}
    /* 多图文预览 */
    .weixin-muti-preview a{height:40px;}
    .weixin-muti-preview{ width:320px; margin:0 auto; border:1px solid #ccc; background-color:#fff; box-shadow:0 0 2px #ddd; border-radius:10px;}
    .weixin-muti-preview li{ border-top:1px solid #ccc; padding:10px; list-style:none; height:60px; position:relative; z-index:10;}
    .weixin-muti-preview p{ height:60px; line-height:30px; padding:0 70px 0 0;overflow:hidden;}
    .weixin-muti-preview img{ width:60px; height:60px;position:absolute; top:10px; right:10px;}
    .weixin-muti-preview .del{ position:absolute; left:0; bottom:0; right:0; background-color:RGBA(0,0,0,.2); text-align:center; line-height:40px; z-index:1001; color:#C00; display:none}
    .weixin-muti-preview li:first-child{ height:150px;border-top:none;}
    .weixin-muti-preview li:first-child p{ position:absolute; bottom:0; left:0; right:0; z-index:1005; background-color:RGBA(0,0,0,.6); color:#fff; line-height:30px; height:30px; margin:0 10px 10px 10px; padding:0 5px; white-space:nowrap; overflow:hidden;}
    .weixin-muti-preview li:first-child img{ width:300px; height:150px;}
    .weixin-muti-preview li:first-child .del{ line-height:40px;height:40px;top:0;}
    .form-item-div{ width:320px; margin:20px auto;}
    .weixin-muti-preview .edit_pic{position:absolute;right:10px;z-index:1005;color:#fff;top:10px;background-color: #498CD0;padding:5px;display:inline-table;cursor:pointer;}
    .form-item-div input{ width:300px;}
    .w_preview li{line-height: 35px;}
    .w_preview label{display:inline-table;width:70px;text-align:right;vertical-align: top;}
    .w_replay{width:360px;text-align:center;color:#404040;font-size:14px;line-height: 35px;}
</style>
<!--添加图文回复-->
<div class="subnav">
    <div class="content_menu ib_a blue line_x">
        <a href="{:url('index',['type'=>$type])}"><em>返回列表</em></a><span>|</span>
        <a href="{:url('add')}" {if condition="$type eq 1"}class="on"{/if}><em>添加文本回复</em></a><span>|</span>
        <a href="{:url('add',['type'=>2])}" {if condition="$type eq 2"}class="on"{/if}><em>添加图文回复</em></a><span>|</span>
        <a href="{:url('add',['type'=>3])}" {if condition="$type eq 3"}class="on"{/if}><em>添加多图文回复</em></a>
    </div>
</div>
<form id="info_form" action="{:url('addDo')}" onsubmit="return check();" method="post" enctype="multipart/form-data">
    <div class="pad_lr_10">
        <div class="col_tab">
            <ul class="J_tabs tab_but cu_li">
                <li class="current">添加图文回复</li>
            </ul>
            <div class="J_panes">
                <div class="content_list pad_10 clearfix">
                    <div class="fl" style="width:50%;">
                    <table width="100%" cellspacing="0" class="search_form">
                        <tbody>
                        <tr>
                            <td>
                                <div class="explain_col">
                                    模型:
                                    <select name="model" id="model">
                                        {volist name='model' id='vo'}
                                        <option value="{$key}">{$vo}</option>
                                        {/volist}
                                    </select>
                                    &nbsp;&nbsp;关键词 :
                                    <input type="text" id="keyword" class="input-text" size="25" value="" />
                                    <input type="button" class="btn" value="搜索" onclick="getData();" />
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table width="100%" cellspacing="0" class="table_form">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th width="30%" align="left">图片</th>
                            <th width="10%">操作</th>
                        </tr>
                        </thead>
                        <tbody id="lists" data-uri="{:url('ajaxGetList')}">
                        </tbody>
                    </table>
                        <div id="pages" style="padding:10px;"></div>
                    </div>
                    <div class="pad_lr_10 fl" style="width:40%">
                        <p class="w_replay">
                            微信回复预览(<span style="color:#ff0000;">大图建议360*200,小图建议200*200</span>)<br/>
                            注：<span style="color:#ff0000;">单击标题就可以更改文字</span>
                        </p>
                        <ul class="weixin-muti-preview" id="select_news" data-idstr="">

                        </ul>
                        <ul class="w_preview">
                            <li>
                                <label for="keywords">关键词：</label><input type="text" name="keyword" id="keywords" class="input-text" size="47">
                            </li>
                          </ul>
                        <p style="color:#ff0000;padding-left:76px;">关键词请用词组，多个关键词请用‘，’分隔，单个关键词不要超过6个字符。图片尺寸建议360*200</p>
                        <input type="hidden" name="type" value="{$type}">
                        <div class="mt10"><input type="submit" value="提交" id="dosubmit" name="" class="btn btn_submit" style="margin:0 0 10px 100px;"><br /><br /><br /></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</form>
<script type="text/html" id="templates">
    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <tr id="news_{{d[i]['id']}}">
        <td class="w_title">{{d[i]['title']}}</td>
        <td class="w_img">{{# if(d[i]['img']){ }}<img src="{{d[i]['img']}}" class="w_img_width" />{{# } }}</td>
        <td align="center"><a href="javascript:;" onclick="selectCon({{d[i]['id']}});">选择</a></td>
    </tr>
    {{# } }}
</script>
<script src="__PUBLIC__/js/jquery.min.1.7.2.js"></script>
<script src="__PUBLIC__/js/layer/layer.js"></script>
<script src="__PUBLIC__/js/layer/laytpl.js"></script>
<script src="__PUBLIC__/js/layer/laypage.js"></script>
<script src="__PUBLIC__/js/plugins/fileuploader.js"></script>
<script>
    getData(1);
    $(function(){
       $("#title").bind('keyup',function(){
           $(".weixin_title").text($(this).val());
       });

        $("#keywords").bind('blur',function(){
           var val = $(this).val();
            $(this).val(val.replace(/，/g,','));
        });
        $(".edit_title").live('blur',function(e){
           var val = $(this).val(),id = $(this).data('id');
            $(this).prev('span').text(val).show();
            $("#title_"+id).val(val);
            $(this).remove();
        });
        $("#select_news > li").live('mouseover',function(e){
            e.preventDefault();
            $(this).find('a.del').show();
        }).live('mouseout',function(){
            $(this).find('a.del').hide();
        });
        $("#select_news li p,#select_news li .edit_pic").live('mouseover',function(e){
            e.stopPropagation();
            $(this).parent().find('a.del').hide();
        });
    });
    function check(){
        var keyword = $("#keywords").val(),idstr = $("#select_news").attr('data-idstr');
        if(idstr.length == 0){
            layer.msg('请选择图文',{icon:2});
            return false;
        }
        if(!keyword){
            layer.msg('请填写关键词',{icon:2});
            return false;
        }
        return true;
    }
    //选择图文
    function selectCon(aid){
        var obj = $("#news_"+aid),
                title = obj.find('.w_title').text(),
                img = obj.find('img').attr('src'),
                model = $("#model").val(),
                news_list = $("#select_news"),
                id_str    = news_list.attr('data-idstr'),
                id_arr    = id_str.split(','),
                len       = id_arr.length,
                id        = model+'_'+aid,
                str       = '';//记录选择id
        if(len > 9){
            alert('选择的图文数量不能超过10条');
            return false;
        }
        if(id_str == ''){
            str = createEle(aid,title,img,model);//根据模型生成链接
            news_list.append(str);
            news_list.attr('data-idstr',id);
        }else{
            if(id_str.indexOf(id) == -1){
                str = createEle(aid,title,img,model);//根据模型生成链接
                news_list.append(str);
                news_list.attr('data-idstr',id_str +','+id);
            }else{
                alert('您已选择过该文章了');
                return false;
            }
        }
    }
    function getData(curr){
        var loading = layer.load(1);
        $.getJSON(document.getElementById('lists').getAttribute('data-uri'), {
            page: curr || 1, //向服务端传的参数
            keyword : $("#keyword").val(),
            model   : $("#model").val()
        }, function(res){
            if(res.status == 1){
                var gettpl = document.getElementById('templates').innerHTML;
                laytpl(gettpl).render(res.data.lists, function(html){
                    document.getElementById('lists').innerHTML = html;
                });
            }else{
                document.getElementById('lists').innerHTML = '<tr><td colspan="3"> '+res.msg+'</td></tr>';
            }
           layer.close(loading);
            //显示分页
            laypage({
                cont: 'pages', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                pages: res.data.total, //通过后台拿到的总页数
                curr: curr || 1, //当前页
                jump: function(obj, first){ //触发分页后的回调
                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                        getData(obj.curr);
                    }
                }
            });
        });
    }
    //编辑图片
    function ajaxUpload(btn,input,o){
        //上传图片
        var obj = $(o);
        var img_uploader = new qq.FileUploaderBasic({
            allowedExtensions: ['jpg','gif','jpeg','png','swf'],
            button: document.getElementById(btn),
            multiple: false,
            action: "{:url('ajaxUploadImg')}",
            inputName: 'img',
            forceMultipart: true, //用$_FILES

            showMessage: function(message){
                $.yingloujie.tip({content:message, icon:'error'});
            },
            onSubmit: function(id, fileName){
                $('#'+btn).addClass('btn_disabled').find('span').text('上传中，请稍候...');
            },
            onComplete: function(id, fileName, result){
                $('#'+btn).removeClass('btn_disabled').find('span').text('更换图片');
                if(result.status == '1'){
                    $('#'+input).val(result.data);
                    obj.parent().parent().find('img').attr('src',result.data);
                } else {
                    $.yingloujie.tip({content:result.msg, icon:'error'});
                }
            }
        });
    }
    //编辑图文标题
    function editTitle(id,o){
        var obj = $(o),val = obj.text();
        obj.hide();
        obj.after('<input type="text" class="input-text edit_title" data-id="'+id+'" size="30" value="'+val+'" />');
    }
    //删除图文
    function del_news(id){
        var obj = $("#select_news"),idstr = obj.attr('data-idstr')+',';
        idstr = idstr.replace(id+',','');
        obj.attr('data-idstr',idstr.substring(0,idstr.lastIndexOf(',')));
        $("#select_tr_"+id).remove();
    }
    function createEle(aid,title,img,model){

        var id = model+'_'+aid,str = '<li class="sltr select-item" id="select_tr_'+id+'">';
            str += '<div>';
            str += '<p><span onclick="editTitle(\''+id+'\',this);">'+title+'</span></p>';
            str += '<div class="cover">';
            str += '<img src="'+img+'" alt="'+title+'" />';
            str += '<div class="edit_pic">';
            str += '<div id="J_upload_img_'+id+'" onclick="ajaxUpload(\'J_upload_img_'+id+'\',\'img_'+id+'\',this)"><span>更换图片</span></div>';
            str += '</div></div>';
            str += '<input type="hidden" name="data['+id+'][Title]" id="title_'+id+'" value="'+title+'" />';
            str += '<input type="hidden" name="data['+id+'][PicUrl]" value="'+img+'" id="img_'+id+'" />';
            str += '<input type="hidden" name="data['+id+'][model]" value="'+model+'" />';
            str += '<input type="hidden" name="data['+id+'][aid]" value="'+aid+'" />';
            str += '<a class="del" onclick="del_news(\''+id+'\')" href="javascript:;">删除</a></div></li>';
        return str;
    }
</script>
</body>
</html>